<template>
    <div class="tagpicker">
        <ul class="tagscatlist">
            <li :class="{'pick':item._id === tagCatPickId}" v-for="(item,index) in this.tagsCatList"
                @click="getTagList(item._id)"
            >
                {{item.desc}}
            </li>
        </ul>
        <ul class="tagslist">
            <li v-for="item in this.tagsList"
                :class="{'pick':item._id === tagPickId}"
                @click="pickTag(item)">
                {{item.name}}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'tagpicker',
        data() {
            return {
                tagCatPickId: undefined,
                tagPickId: undefined,
                tagsCatList: [],
                tagsList: []
            };
        },
        mounted() {
            this.$Api.getTagCatList().then((res) => {
                if (res.ok) {
                    this.tagsCatList = res.body.data;
                    // eslint-disable-next-line
                    this.getTagList(res.body.data[0]._id);
                } else {
                    this.$Modal.info({content: '网络好像出错了~'});
                }
            }).catch((error) => {
                console.log(error);
            });
        },
        methods: {
            getTagList(id) {
                if (id) {
                    this.$Api.getTagList({catId: id}).then((res) => {
                        if (res.ok) {
                            this.tagCatPickId = id;
                            this.tagsList = res.body.data;
                        }
                    }).catch((error) => {
                        console.log(error);
                    });
                }
            },
            pickTag(item) {
                // eslint-disable-next-line
                if (item._id === this.tagPickId) {
                    this.tagPickId = undefined;
                } else {
                    // eslint-disable-next-line
                    this.tagPickId = item._id;
                }
                this.$emit('input', Object.assign({}, item, {_id: this.tagPickId}));
            }
        }
    };
</script>

<style lang="scss">
    .tagpicker {
        .pick {
            background: rgb(253, 163, 62) !important;
            color: white !important;
            border: 1px solid rgb(253, 163, 62) !important;
        }
        .tagscatlist {
            padding: 10px 20px;
            border-bottom: 1px solid #ccc;
            li {
                padding: 0 5px;
                margin: 5px 5px;
                display: inline-block;
                background: rgb(250, 250, 250);
                border-radius: 15px;
                color: #999;
                border: 1px solid #999;
                font-size: 15px;
            }
        }
        .tagslist {
            padding: 10px 20px;
            li {
                padding: 0 5px;
                margin: 5px 5px;
                display: inline-block;
                background: rgb(250, 250, 250);
                border-radius: 15px;
                color: #999;
                border: 1px solid #999;
                font-size: 15px;
            }
        }
    }
</style>
